.masonry-three{
    .masonry-three-container{
        width: 100%;
        max-width: 1250px;
        margin: 0 auto;
        .masonry-three-title{
            color: #31364C;
            font-size: 33px;
            font-weight: normal;
        }
        .masonry-three-word{
            padding: 20px 0;
            color: #9699A6;
            font-size: 14px;
        }
        .menu{
            margin-top: 20px;
            li{
                float: left;
                margin-right: 20px;
                a{
                    padding: 30px 5px;
                    display: inline-block;
                    color: #31364C;
                    border-top: 2px solid #fff;
                    &:hover{
                        color: #00BFF3;
                        border-top-color: #00BFF3;
                    }
                }
            }
            .SelectIt{
                color: #00BFF3;
                border-top-color: #00BFF3;
            }
        }
        .masonry-three-pics{
            margin-top: 30px;
            position: relative;
            .masonry-three-pics-list{
                width: 100%;
                max-width: 310px;
                color: #fff;
                overflow: hidden;
                border-radius: 2px;
                float: left;
                .image{
                    position: relative;
                    padding: 30% 20px;
                    img{
                        
                    }
                }
                .image-bg{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    .image-bg-top{
                        margin-left: 10px;
                        h1{
                            font-size: 22px;
                            font-weight: normal;
                        }
                        p{
                            font-size: 12px;
                        }
                    }
                    .image-bg-bottom{
                        position: absolute;
                        bottom: 10px;
                        left: 10px;
                        a{
                            display: inline-block;
                            margin:0 5px;
                            color: #fff;
                            font-size: 14px;
                            &:hover{
                                color: #00BFF3;
                            }
                        }
                        .image-bg-btn{
                            float: right;
                            width: 40px;
                            height: 40px;
                            border-radius: 100%;
                            background-color: #222628;
                        }
                        .image-bg-btn-point{
                            display: block;
                            width: 10px;
                            height: 10px;
                            margin-left: 15px;
                            margin-top: 15px;
                            background-image: url(../img/hf-project-icons.png);
                            background-position: -3px 0;
                        }
                    }
                    
                }
                &:hover .image-bg{
                    background-color: rgba(0,0,0,0.2);
                    cursor: pointer;
                }
                &:hover img{
                    transform: scale(1.2,1.2);
                    transition: all 1s;
                }
                &:hover{
                    box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.5);
                }
            }
        }
    }
    .blog-btn{
         margin: 50px 0;
         width: 130px;
         height: 50px;
         text-align: center;
         line-height: 50px;
         color: #BBBBC5;
         border: 2px solid #CECED8;
         border-radius: 50px;
         margin: 6% auto;
         cursor: pointer;
         &:hover{
             color: #fff;
             background-color: #89CB27;
             border: 2px solid #89CB27;
         }
       }
}
